﻿<div class="row" ng-controller="ChartJsCtrl">
    <div class="col-xs-12">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="widget">
                    <div class="widget-header ">
                        <span class="widget-caption">Doughnut Chart</span>
                        <div class="widget-buttons">
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="chartcontainer">
                            <canvas id="doughnut" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Line Chart</span>
                        <div class="widget-buttons">
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="chartcontainer">
                            <canvas id="line" height="300" width="450"></canvas>
                        </div>
                        <table class="table table-bordered table-striped table-condensed flip-content">
                            <thead class="flip-content bordered-palegreen">
                                <tr>
                                    <th>#</th>
                                    <th>Name</th>
                                    <th class="numeric">Quantity</th>
                                    <th class="numeric">Unit</th>
                                    <th class="numeric">Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="data in referrallists" ng-show="referrallists.length != 0">
                                    <td class="numeric">{{$index+1}}</td>
                                    <td><a href="#/app/referral/{{data.UserId}}"> {{data.UserName}}</a></td>
                                    <td class="numeric">{{data.TotalF1}}</td>
                                    <td class="numeric">{{data.MemberShip}}</td>
                                    <td class="numeric">$ {{data.TotalMoney}}</td>
                                </tr>
                            </tbody>
                        </table> 


                    </div>
                </div>
            </div>
        </div>
        <div class="horizontal-space"></div>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Bar Chart</span>
                        <div class="widget-buttons">
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="chartcontainer">
                            <canvas id="bar" height="300" width="450"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Polar Area Chart</span>

                        <div class="widget-buttons">
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>

                    <div class="widget-body">

                        <div class="chartcontainer">
                            <canvas id="polarArea" height="300"></canvas>


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="horizontal-space"></div>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Pie Chart</span>

                        <div class="widget-buttons">
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>

                    <div class="widget-body">

                        <div class="chartcontainer">
                            <canvas id="pie" height="300"></canvas>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Radar Chart</span>

                        <div class="widget-buttons">
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>

                    <div class="widget-body">

                        <div class="chartcontainer">
                            <canvas id="radar" height="300"></canvas>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>